<template>
    <h1>个人介绍</h1>
    <ul>
        <li>姓名:{{name}}</li>
        <li>年龄:{{age}}</li>
        <li>简介:{{introduce()}}</li>
    </ul>
    <hr>
    <div>
        {{ message}}
        <button @click="changeMessage">改变</button>
    </div>
</template>
<!-- 
    setup函数作为组合式API的入口
    注意：当组合式API中定义的变量和选项式API定义的data中的变量名称相同的时候
    1、优先选择组合式API的变量，而后才是选项式API中的变量
    2、setup中不能访问选项式APIdata中的数据,但是选项式APImethods中的方法可以访问组合式API(setup函数定义的变量)
    3、setup函数不能是异步的
    4、建议尽可能不要将两种写法混写
-->
<script lang='ts'>
    import IUserFun from '@/types/IUserFun'
    export default{
        data(){
            return{
                message:'Hello Vue3',
                name:'zhaijizhe'
            }
        },
        methods:{
            changeMessage(){
                this.message=`Hello ${this.nickName}`
            }
        },
        setup() {
          //定义变量
          let name:string='Giles'
          let nickName:string="Gileszhiajizhe"
          //定义表达式
          let age:number=39+1
          //定义函数
          const introduce:IUserFun=()=>`我叫${name},今年${age}岁`
          //setup中定义变量如果要在template中方法，就不要要将它return出去 
          return{
            name,age,introduce,nickName
          }  
        }
    }
</script>

<style lang='scss' scoped>
</style>